<template>
  <t-adaptive-page-tabs
    title="角色管理列表"
    :columns="table2.columns"
    :btnPermissions="btnPermissions"
    :table2="table2"

  >
<!--:opts="opts"
 @selection-change="selectionChange"@size-change="handlesSizeChange"
    @page-change="handlesCurrentChange"
    @submit="conditionEnter"-->
<!--    <template #toolbar>-->
<!--      <el-button type="primary" @click="handleAdd" v-hasPermi="'root:web:sys:role:add'">新增</el-button>-->
<!--&lt;!&ndash;      <el-button type="danger" :disabled="state.roleIds.length < 1" @click="delHandle" v-hasPermi="'root:web:sys:role:del'"-->
<!--        >批量删除</el-button-->
<!--      >&ndash;&gt;-->
<!--    </template>-->
  </t-adaptive-page-tabs>
</template>

<script setup lang="tsx" name="roleManageList">
import { useAuthStore } from "@/store/modules/auth";
const authStore = useAuthStore();
const widthSize = ref(5);
const btnPermissions = authStore.authButtonListGet;
const handleDelete = (row: any) => {
  console.log("点击删除", row);
};
const handleAdd = () => {
  console.log("点击新增");
};
const delHandle = () => {
  console.log("批量删除");
};
const edit = (row: any) => {
  console.log("编辑", row);
};
const table2: any = reactive({
  toolbar:[
    {
      text: "编辑22222",
      hasPermi: "root:web:sys:role:alter",
      click: "floor://qqq/qqqq"
      // fun: edit
    },
    {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    },
    {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    }, {
      text: "编辑2",
      hasPermi: "root:web:sys:role:alter",
      fun: edit
    },
    {
      text: "删除",
      hasPermi: "root:web:sys:role:del",
      fun: handleDelete
    }
  ],
  queryData: {
      roleName: undefined, // 角色名称
      roleKey: undefined, // 权限字符
      createTime: null,
      status: undefined
    },
    url: "/sys/roleList",
    firstColumn: { type: "selection" },
    // 表头数据
    columns: [
      { prop: "roleName", label: "角色名称", minWidth: 120, search: 'text' },
      { prop: "roleKey", label: "权限字符", minWidth: 120, search: 'text' },
      { prop: "createTime", label: "创建时间", minWidth: 140, search: 'datetimeRange' },
      {
        prop: "status",
        label: "状态",
        render: (text: any, row: any) => {
          return (
            <el-switch
                    size="small"
              active-value={true}
              v-model={row.status}
              inactive-value={false}
              onChange={() => handleStatusChange(row)}
            ></el-switch>
          );
        }
        , search: 'select'
      }
    ],
    operator: {
      fixed: "left", // 固定列表右边（left则固定在左边）
      width: "180",
      label: "操作",
      buttons: [
        {
          text: "编辑",
          hasPermi: "root:web:sys:role:alter",
          fun: edit
        },
        {
          text: "删除",
          hasPermi: "root:web:sys:role:del",
          fun: handleDelete
        }
      ]
    }
  });

const opts = computed(() => {
  return {
    roleName: {
      label: "角色名称",
      comp: "el-input"
    },
    roleKey: {
      label: "权限字符",
      comp: "el-input"
    },
    date: {
      label: "创建时间",
      comp: "t-date-picker",
      // span: 2,
      bind: {
        type: "datetimerange"
      }
    }
  };
});

const handleStatusChange = (row: any) => {
  console.log("点击状态", row);
};

</script>
